<template>
  <el-form-item label="频道">
    <!--
      clearable: 用户可以清空选择项
      @Change: 当用户在下拉列表中做出选择时，
    要告诉父组件用户选了什么 -->
    <el-select
      clearable
      placeholder="请选择频道"
      @change="hChange"
      v-model="channelId">
      <el-option
      v-for="channel in channels"
      :key="channel.id"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
  </el-form-item>
</template>
<script>
// 1. 在组件内，自已去获取获取数据，填充到option中
export default {
  name: 'MyChannel',
  props: ['value'], // 在子组件中接收父组件中传递的数据
  data () {
    return {
      channelId: '', // 频道编号
      channels: [] // 频道列表
    }
  },
  created () {
    this.loadChannels()
  },
  watch: {
    // 当数据变化时，这个函数会自动调用，并传入变化前后的 旧值和新值。
    // 这里的value不是data中的数据，而是props中的定义的
    // 它是父组件中使用v-model时（语法糖,它相当于给子组件传入一个名为value的prop）传入的
    value (newVal, oldVal) {
      console.log('传入的数据value变化了', oldVal, newVal)
      // 更新- 显示从父组件中传入的频道
      this.channelId = newVal
    }
  },
  methods: {
    // val它会自动获取当前用户选中的数据
    hChange (val) {
      console.log('用户在子组件中选择的频道是', val)
      // 抛出事件，并传递数据
      this.$emit('input', val)
    },
    async loadChannels () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/channels'
        })
        console.log('获取频道信息', res)
        // 保存数据
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
